{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>老师批卷（这儿有bug）</title>
  <!-- <link rel="stylesheet" type="text/css" href="{% static 'login/css/index.css' %}"/> -->
  <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">
  <style type="text/css">
      /*h5{
        margin: 0;
        padding: 0;
        }*/
      </style>
    </head>
    <body style="background: #2AABD2;">

      <div class="container">
        <!--页面标题部分-->
        <div class="row">
          <div class="jumbotron" style="background: #FFFFFF;opacity: 0.3;color: #000000;">
            <h1 class="text-center text-muted" style="font-family: '微软雅黑'"><span class="glyphicon glyphicon-globe"></span>&ensp;python+人工智能&ensp;<span class="glyphicon glyphicon-globe"></span><br/>1802C班2018年度7月水平测验</h1>
            {% if student_name %}
            <h2 class="text-center text-muted" style="font-family: '微软雅黑'">亲爱的{{student_name}}老师，请开始批阅试卷</h2>
            {% endif %}
          </div>      
        </div>
        <!--/页面标题结束-->
        <!--提示部分-->
        <div class="row" style="margin-bottom: 10px;">
          <div class="col" style="text-align: center;">

            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              老师须知(开始批卷之前请点击这里)
            </button>
            <a href="{% url 'paper:teacher_index' %}"><button type="button" class="btn btn-primary btn-lg">点此返回主页面</button></a>
            <a href="{% url 'login:login' %}"><button type="button" class="btn btn-primary btn-lg">点此返回登录页面</button></a>
            
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">考生须知</h4>
              </div>
              <div class="modal-body">
               <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;1.本试卷共有五种题型，分别是:单选题({{单选题.0}}道,每题{{单选题.1}}分),<!-- 多选题({{多选题.0}}道,每题{{多选题.1}}分), -->填空题({{填空题.0}}道,每题{{填空题.1}}分),判断题({{判断题.0}}道,每题{{判断题.1}}分),英汉互译题({{英汉互译题.0}}道,每题{{英汉互译题.1}}分),简答题({{简答题.0}}道,每题{{简答题.1}}分)</h3>
               <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;2.页面底部交卷按钮点击之后不可撤销，成绩直接上传，请不要误点。</h3>

             </div>
             <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
            </div>
          </div>
        </div>
      </div>
      <form action="{% url 'paper:save_batch' %}" method="post" class="cc">
        {% csrf_token %}

        <!--/提示部分-->
        {%if 单选题%}
        <!--这里放置单选题面板-->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title"> 单选题(单题分值:{{单选题.1}})</h3>
          </div>
          <div class="panel-body">
            {% for question in 单选题.2 %}
            <h3>{{forloop.counter}}、{{question.0.question_text}}</h3>

            <ol type="A">
              {% for choice in question.0.choice_set.all %}
              <div class="radio">

                <li>
                  {{choice.choice_text}} 
                </li>

              </div>
              {% endfor %}
            </ol>
            {% with m=question.1.choice_text n=question.0.answer_set.all.0.answer_text %}
            {% ifequal m n %}
            <h5 style="color: blue;">此题答对</h5>
            <h5 style="color: red;">学生作答：{{m}}</h5>
            <div class="input-group" style="color: red;">
              <!-- 传递分数 -->
              <label for="inputDan">此题得分：
                <input type="text" name="{{question.0.id}}" id="inputDan" value="{{单选题.1}}" readonly="readonly" style="border: none;background: none;width: 10px;" required>分</label>
              </div>
              {% else %}
              学生作答：{{m}}<br>
              <h5 style="color: red;">正确答案：{{n}}</h5>
              <div class="input-group" style="color: red;">
                <!-- 传递分数 -->
                <label for="inputDan">此题得分：
                  <input type="text" name="{{question.0.id}}" id="inputDan" value="0" readonly="readonly"  style="border: none;background: none;width: 10px;">分</label>
                </div>
                {% endifequal %}     
                {% endwith %}
                {% endfor %}
              </div>    
            </div>
            <!--/单选题面板结束-->
            {%endif%}

            {% if 多选题 %}
            <!--多选题面板-->
            <div class="panel panel-success">
              <div class="panel-heading">
                <h3 class="panel-title"> 多选题(单题分值:{{多选题.1}})</h3>
              </div>

              <div class="input-group" style="display: none;">
                <!-- 传递分数 -->
                <label for="inputScore">
                  <input type="text" name="{{question.id}}" id="inputScore" value="{{多选题.1}}"></label>
                </div>

                <div class="panel-body">
                  <h3>这里放置题干，直接更改文字即可</h3>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="">
                      A.这里放置选项文字，直接更改即可。
                    </label>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="">
                      B.这里放置选项文字，直接更改即可。
                    </label>
                  </div>  
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="">
                      C.这里放置选项文字，直接更改即可。
                    </label>
                  </div>  
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="">
                      D.这里放置选项文字，直接更改即可。
                    </label>
                  </div>  
                </div>
              </div>
              {% endif %}
              <!--/多选题面板结束-->
              <!--填空题面板部分-->
              {% if 填空题 %}
              <div class="panel panel-info">
                <div class="panel-heading">
                  <h3 class="panel-title"> 填空题(单题分值:{{填空题.1}})</h3>
                </div>
                <div class="panel-body table-responsive">
                  <table class="table table-hover">
                    <tr>
                      <th>题干</th>
                      <th>答题</th>
                      <th>得分</th>
                    </tr>
                    {% for question in 填空题.2 %}
                    <tr>
                      <td>{{forloop.counter}}、{{question.0.question_text}}</td>
                      <td>
                        <div class="input-group">
                          学生作答：{{question.1}}<br>
                          <h5 style="color: red;">正确答案：{{question.0.answer_set.all.0.answer_text}} </h5> 
                        </div>
                      </td>

                      <td> 
                        <div class="input-group">
                          <input type="number" name="{{question.0.id}}" class="form-control" min="0" max="{{填空题.1}}" required>
                        </div>
                      </td>
                      {% endfor %}
                    </tr>
                  </table>
                </div>
              </div>
              {% endif %}
              <!--/填空题面板结束-->
              <!--判断题面板开始-->
              {% if 判断题 %}
              <div class="panel panel-warning">
                <div class="panel-heading">
                  <h3 class="panel-title"> 判断题(单题分值:{{判断题.1}})</h3>
                </div>
                <div class="panel-body">
                  {% for question in 判断题.2 %}
                  <div class="row">

                    <div class="col-sm-8">
                      <p>{{forloop.counter}}、{{question.0.question_text}}</p>         
                    </div>
                      <div class="col-sm-4">
                        {%ifequal question.0.answer_set.all.0.answer_text question.1%}

                        <span style="color: blue;">学生做答正确：{{question.1}}</span>
                        <div class="input-group pull-right" style="color: red;">
                          
                          <!-- 传递分数 -->
                          <label for="inputPan">此题得分：
                            <input type="text" name="{{question.0.id}}" id="inputPan" value="{{判断题.1}}" readonly="readonly" style="border: none;background: none;width: 10px;">分</label>
                          </div>
                        {%else%}
                        <span>正确答案：{{question.0.answer_set.all.0}}
                          &nbsp&nbsp&nbsp学生做答：{{question.1}}</span>
                        <div class="input-group pull-right" style="color: red;">  
                          <!-- 传递分数 -->
                          <label for="inputPan">此题得分：
                            <input type="text" name="{{question.0.id}}" id="inputPan" value="0" readonly="readonly" style="border: none;background: none;width: 10px;">分</label>
                          </div>
                        {%endifequal%}

                      </div>
                    </div>
                    {% endfor %}    
                  </div>
                </div>
                {% endif %}
                <!--/判断题面板结束-->
                <!--英汉互译题面板-->
              {% if 英汉互译题 %}
              <div class="panel panel-info">
                <div class="panel-heading">
                  <h3 class="panel-title"> 英汉互译题(单题分值:{{英汉互译题.1}})</h3>
                </div>
                <div class="panel-body table-responsive">
                  <table class="table table-hover">
                    <tr>
                      <th>题干</th>
                      <th>答题</th>
                      <th>得分</th>
                    </tr>
                    {% for question in 英汉互译题.2 %}
                    <tr>
                      <td><h4>{{forloop.counter}}、{{question.0.question_text}}</h4></td>
                      <td>
                        <div class="input-group">
                          学生作答：{{question.1}}<br>
                          <h5 style="color: red;">正确答案：{{question.0.answer_set.all.0.answer_text}} </h5> 
                        </div>
                      </td>

                      <td> 
                        <div class="input-group">
                          <input type="number" name="{{question.0.id}}" class="form-control" min="0" max="{{英汉互译题.1}}" required>
                        </div>
                      </td>
                      {% endfor %}
                    </tr>
                  </table>
                </div>
              </div>
              {% endif %}
                  <!--/英汉互译题面板结束-->

                  <!--简答题面板-->
                  {% if 简答题 %}
                  <div class="panel panel-danger">
                      <div class="panel-heading">
                          <h3 class="panel-title"> 简答题(单题分值:{{简答题.1}})</h3>
                      </div>
                      <div class="panel-body">
                           {% for question in 简答题.2 %}
                           <div class="row">
                                <div class="col-sm-10 col-sm-offset-1">
                                    <h4>{{forloop.counter}}、{{question.0.question_text}}</h4>
                                    <div class="col-sm-6">
                                        <h4 style="color: red;text-decoration: underline;">学生作答：{{question.1}}</h4>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="input-group pull-right">
                                        <input type="number" name="{{question.0.id}}" class="form-control" min="0" max="{{简答题.1}}" required>
                                    </div>
                                </div>
                           </div>
                      </div>
                      {% endfor %}
                  </div>
                  {% endif %}
                    <!--/简答题面板结束-->
                  <div class="col-sm-8">
                      <h3 class="the_all pull-right" style="color: red;"></h3><h3 class="pull-right">总分：</h3>
                      <input type="text" id="last_total" name="total_score" style="display: none;" value="">
                  </div>
                  
                    <div class="row" style="margin-top:10px;">
                      <div class="col-sm-6 col-sm-offset-3">
                        <button type="submit" class="btn btn-danger btn-lg btn-block" style="outline: none;">确认全部完成？点击提交。</button>
                      </div>          
                    </div>

              </div>
              </form>
    <!-- <script type="text/javascript">
       $(".btn1").trigger("click");
     </script> -->
     <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
     <!-- Bootstrap部分： -->
     <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>
     <script type="text/javascript">
                      $('.cc input').not('#last_total').addEventListen('cilck', function(){
                        var total = 0;
                        $("input").not('#last_total').each(function(){
                          total+=(parseFloat($(this).val())?parseFloat($(this).val()):0);
                        });
                        /*total=total.toFixed(1);保留小数点后一位，因为js累加可能会出现小数点后出现多位的情况，可以通过它控制小数点位数*/
                        // $(".the_all").text()=;
                        document.getElementById('last_total').value = total;
                      });
                    </script>
   </body>
   </html>